<template>
    <div class="category-item" v-on:click="navigateForumCategory()">
        <el-icon size="24" color="black">
            <Bell v-if="icon == 'notify'"/>
            <Notebook  v-else-if="icon == 'learn'"/>
            <Microphone v-else-if="icon == 'roast'"/>
            <Cherry v-else="icon == 'love'"/>
        </el-icon>
        <span class="category-item-font" v-if="icon == 'notify'">通知墙</span>
        <span class="category-item-font" v-else-if="icon == 'learn'">学习墙</span>
        <span class="category-item-font" v-else-if="icon == 'roast'">吐槽墙</span>
        <span class="category-item-font" v-else="icon == 'love'">表白墙</span>
    </div>
  </template>
  
  <script>
  
  export default {
    props:{
        "icon":String
    },
    data(){
        return{
            
        }
    },
    methods:{
        navigateForumCategory(){
            console.log(this.icon)
            switch (this.icon) {
                case 'notify':
                    this.$router.push("/category/notify")
                    break;
                case 'learn':
                    this.$router.push("/category/learn")
                    break;
                case 'roast':
                    this.$router.push("/category/roast")
                    break;
                default:
                    this.$router.push("/category/love")
                    break;
            }
        }
    },
    mounted(){

    }
  }
  
  </script>

<style>
.category-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.category-item-font{
    padding-top: 2px;
    font-size: 10px;
    font-weight: 800;
}

</style>
  